import { ref } from "vue";
import type { Query } from '@/interface/Query'
import type { Menu } from "@/interface/Menu";
import type { Modal } from "@/interface/Modal"
import type { UploadChangeParam } from "ant-design-vue";
import { message } from "ant-design-vue";
import type { Rule } from "ant-design-vue/es/form";
import { listApi, operatorApi , oneIdApi , deleteApi , treeNodeApi } from "@/controller/MenuApi";
import { onMounted } from 'vue'


export default function () {

    onMounted(()=> {
        getMenus();
    });

    let queryModel = ref({
        page: 1,
        size: 20
    } as Query )


    let total = ref(0);
    function getMenus() {
        listApi(queryModel.value).then(res => {
           if(res.code == 200) {
               data.value = res.data.records;
               total.value = parseInt(res.data.totalRow.toString());
           }
       });
    }

    function resetQuery() {
        queryModel.value = {
            page: 1,
            size: 20,
            keyWord: ''
        } as Query
        getMenus();
    }

    const columns = ref([
        {
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
            align: 'center',
            fixed: 'left',
            resizable: true,
            width: 120
        },
        {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon',
            align: 'center',
            resizable: true,
            width: 80
        },
        {
            title: '菜单类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center',
            resizable: true,
            width: 120
        },
        {
            title: '排序',
            dataIndex: 'sortOrder',
            key: 'sortOrder',
            sorter: (a : Menu, b : Menu) => a.sortOrder - b.sortOrder,
            align: 'center',
            resizable: true,
            width: 80
        },
        {
            title: '权限标识',
            dataIndex: 'permissionCode',
            key: 'permissionCode',
            align: 'center',
            resizable: true,
            width: 120
        },
        {
            title: '组件路径',
            dataIndex: 'url',
            key: 'url',
            align: 'center',
            resizable: true,
            width: 120
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            resizable: true,
            width: 60
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            resizable: true,
            width: 120
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            resizable: true,
            width: 160
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            resizable: true,
            width: 160
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            key: 'action',
            align: 'center',
            width: 260
        },
    ]);

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }

    const data  = ref([] as Menu[])


    let operatorStore = ref({
        open: false
    } as Modal);


    let expansion = ref(false);

    let searchBox = ref(true);

    let loading = ref(false);
    const handleUpload = (info: UploadChangeParam) => {
        if (info.file.status === 'uploading') {
            loading.value = true;
            return;
        }
        if (info.file.status === 'done') {
            if(info.file.response.code == 200) {
                menu.value.icon = info.file.response.data;
                loading.value = false;
            }else {
                message.error("文件上传失败!")
            }
        }
    };

    let menu = ref({} as Menu);


    function operator(cmd : number, id? : string | null, pId? : string) {
        treeNodeMenu();
        if(id) {
            oneIdApi(id).then(res => {
                if (res.code == 200) {
                    menu.value = res.data;
                }
            });
        }
        if(pId) {
            menu.value.pId = pId;
        }
        operatorStore.value.open = true;
        operatorStore.value.cmd = cmd;
    }

    let formRef = ref();

    function submitOperator() {
        formRef.value
            .validate()
            .then(() => {
                operatorApi(menu.value).then(res => {
                    if(res.code == 200) {
                        message.success( operatorStore.value.cmd == 0 ? '新增菜单成功!' : '编辑菜单成功');
                        resetFrom();
                        getMenus();
                    }else {
                        message.error(res.msg);
                    }
                });
            })
            .catch(( e: any ) => {

            });
    }

    function deleteMenu(id : string) {
        deleteApi(id).then(res => {
            if (res.code == 200) {
                message.success("菜单删除成功!");
                getMenus();
            }else {
                message.error(res.msg)
            }
        });
    }

    let rules : Record<string, Rule[]> = {
        menuName: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        icon: [
            { required: true, message: '请输入菜单图标', trigger: 'blur' },
        ],
        sortOrder: [
            { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        permissionCode: [
            { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        status: [{ required: true, message: '请选择菜单状态', trigger: 'change' }],
        type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
    }

    function resetFrom() {
        formRef.value.resetFields();
        operatorStore.value.open = false;
        menu.value = {} as Menu;
    }

    function pageChange(page : number, pageSize : number) {
        queryModel.value.page = page;
        queryModel.value.size = pageSize;
        getMenus();
    }

    let treeMenu = ref([] as Menu[]);

    function treeNodeMenu(keyWord? : string) {
        treeNodeApi(keyWord).then(res => {
            if(res.code == 200) {
               treeMenu.value = res.data;
            }
        });
    }

    return {
        queryModel , resetQuery , columns ,
        data , operatorStore , submitOperator ,
        operator , menu , handleUpload , loading ,
        searchBox , formRef , rules , resetFrom ,
        getMenus , deleteMenu , total , pageChange ,
        treeMenu , expansion , handleResizeColumn ,
        treeNodeMenu
    }
}
